<template>
  <div class="app-container">
    <el-row>
      <el-button size="small" type="primary" @click="dialog_newly = true" icon="el-icon-folder-add">新增</el-button>
    </el-row>
    <el-divider></el-divider>
    <!-- 表格 -->
    <el-table size="medium" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
    @selection-change="handleSelectionChange" border>
      <el-table-column prop="problemName" label="报修类型" align="center" width="300"></el-table-column>
      <el-table-column prop="handle" label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" plain @click="deleteProblemType({ id: scope.row.id })">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加报修类型弹窗 -->
    <el-dialog title="添加" :visible.sync="dialog_newly">
      <el-form :label-position="labelPosition" label-width="100px" style="margin-left:20%;">
        <el-form-item label="报修类型 :" >
          <el-input v-model="ProblemType" style="width:60%" placeholder="请输入报修类型" clearable></el-input>
        </el-form-item>
      </el-form>
         <div slot="footer" class="dialog-footer">
         <el-button @click="dialog_newly = false" >取 消</el-button>
         <el-button type="primary" @click="addProblemType" class="dialogbutton">确 定</el-button>
         </div>
    </el-dialog>
    <!-- 添加报修类型弹窗 -->

  </div>
</template>

<script>
import { getProblemType,addProblemType,deleteProblemType } from '@/api/MaintainView/MaintainType/index.js'
export default {
  data() {
    return {
      labelPosition: "left",
      dialog_newly:false,
      tableData: [],
      ProblemType:""
    }
  },
  methods: {
    handleSelectionChange() {

    },
    // 删除故障类型
    deleteProblemType(e) {
      this.$confirm('此操作将删除该故障类型, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteProblemType(e).then(res => {
            // console.log(res)
            if (res.status == 200) {
              this.$message({
              message: '删除成功!',
              duration:1000,
              type: 'success',
              onClose: () => {
                this.getProblemType()
            }
          })
          }
        })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    //添加故障类型
    addProblemType() {
      addProblemType({name:this.ProblemType}).then(res => {
        console.log(res)
        if (res.status == 200) {
          this.dialog_newly = false
          this.$message({
            message: '添加成功!',
            duration:1000,
            type: 'success',
            onClose: () => {
                this.getProblemType()
            }
          })
        }
      })
    },
    //查询故障类型
    getProblemType() {
      getProblemType({
        current: 0,
        field: "",
        order: "",
        pageSize: 20
      }).then(res => {
        if (res.status == 200) {
          this.tableData=res.data.data.list
        }
      }).catch(error => {
        // console.log(error.response.status);
        // if (error.response.status == 401) {
        //   this.$confirm('登录状态过期, 请重新登录!', '提示', {
        //     confirmButtonText: '确定',
        //     // cancelButtonText: '取消',
        //     showCancelButton: false,
        //     type: 'warning'
        //   }).then(() => {
        //     this.$router.push('/login')
        //   }).catch(() => {

        //   })
        // }
      })
    }
  },
  created() {
    this.getProblemType()
  },
};
</script>
<style lang="scss" scoped>

</style>
